<template>
 <div id="main">
    <el-container>
        <el-main style="overflow-y: hidden;padding: 0;height: fit-content">
            <el-carousel  autoplay="false" height="600px" >
                <el-carousel-item>
                    <div class="bg1">
                        <div class="text">
                            <h2 >Welcome to HRS!</h2>
                            <h3 >Login please before you use our services.</h3>
                        </div>
                    </div>
                </el-carousel-item>

            </el-carousel>


        </el-main>
    </el-container>
 </div>
</template>

<script>
    import Header from "../components/Header.vue";
    import Footer from "../components/Footer.vue";
    export default {
        name: "Home",
        components: {Footer, Header}
    }
</script>

<style scoped>
  #main{
    width:100%;
    color:#fff;
    font-size:40px;
  }
    .text{
        line-height:30px;
        margin: auto;
    }
    .bg1{
        background-image: url("../../src/assets/bg5.jpeg");
        background-size:cover;
        width: 100%;
        height: 700px;
        display: flex;
    }
</style>